<!DOCTYPE html>
<html>
<!-- Head -->
<head>
  <title>注册表单</title>
  <!-- Meta-Tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- //Meta-Tags -->
  <!-- Style -->
  <link rel="stylesheet" href="css/common.css" type="text/css" media="all">
  <link rel="stylesheet" type="text/css" href="./css/layer.css">
</head>
<body>
  <h1>XBiaoShop</h1>
  <div class="container w3layouts agileits pr">
    <a href="index.html" class="back"></a>
    <div class="register w3layouts agileits">
      <h2>欢 迎 注 册</h2>
      <form action="#" method="post" @submit.stop="">
        <input type="text" @blur="checkUsername()" v-model="user.username" Name="Name" placeholder="用户名" required="">
        <input type="email" v-model="user.email" Name="Email" placeholder="邮箱" required="">
        <input type="password" v-model="user.password" @blur="checkPassword()" Name="Password" placeholder="密码" required="">
        <input type="password"v-model="rePassword" @blur="checkPassword()" Name="Password" placeholder="确认密码" required="">
      </form>
      <div class="send-button w3layouts agileits">
        <input type="submit" @click="register()" value="免费注册">
      </div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="footer w3layouts agileits">
    <p>Copyright &copy; 2020.XB All rights reserved.</p>
  </div>
</body>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="vue/vue-2.6.11.js"></script>
<script src="vue/axios-0.19.2.min.js"></script>
<script src="vue/layer.js"></script>
<script>
  new Vue({
    el:'.container',
    data:{
      user:{
        username:'',
        email:'',
        password:''
      },
      rePassword:'',
      passwordFlag:false,
      userIsExits:false
    },
    methods: {
      checkUsername:function(){
        axios.get(`user/getbyUsername/${this.user.username}`).then(rs=>{
          debugger;
          if (rs.data.success){
            this.userIsExits=true;
            layer.msg("用户已存在");
          }else {
            this.userIsExits=false;
            // layer.msg("用户不存在！")
          }
        })
      },
      checkPassword:function(){
        if (this.user.password!=''&&this.rePassword!=''&&this.user.password!=this.rePassword){
          layer.msg("密码不一致！")
        } else {
          this.passwordFlag=true;
        }
      },
      register: function () {
        if (this.user.username==''){
          layer.msg("用户名不能为空！！！")
        }else  if (this.user.email==''){
          layer.msg("邮箱不能为空！！！")
        } else  if (this.user.password==''){
          layer.msg("密码不能为空！！！")
        } else  if (this.rePassword==''){
          layer.msg("确认密码不能为空！！！")
        }else {
          debugger;
          this.checkUsername();
          if (this.passwordFlag&&!this.userIsExits) {
            axios({
              url: `user/register`,
              data: this.user,
              method: 'post',
              data: this.user
            }).then(response => {
              layer.msg("注册成功！");
              location.href="index.html";
            }).catch(error => {
              layer.msg(error.message);
            })
          }else if (!this.passwordFlag) {
            layer.msg("密码不一致，请确认一下密码！")
          }
          else if (this.userIsExits) {
            layer.msg("用户已存在，请更改用户名！")
          }
        }
      },
    }
  });
</script>
</html>